<template>
  <footer class="footer bili-footer">
    <div class="footer-wrp">
      <div class="footer-cnt clearfix">
        <section class="boston-postcards">
          <dl>
            <dt>bilibili</dt>
            <dd><a target="_blank" href="//www.bilibili.com/html/aboutUs.html">关于我们</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/html/friends-links.html">友情链接</a></dd>
            <dd><a target="_blank" href="//bmall.bilibili.com/#!/">哔哩哔哩周边</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/html/contact.html">联系我们</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/html/join.html">加入我们</a></dd>
            <dd><a target="_blank" href="https://account.bilibili.com/site/ident.html">官方认证</a></dd>
          </dl>
          <dl>
            <dt>传送门</dt>
            <dd><a target="_blank" href="//www.bilibili.com/html/help.html">帮助中心</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/video/av120040/">高级弹幕</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/event">活动专题页</a></dd>
            <dd><a target="_blank" href="//www.bilibili.com/html/copyright.html">侵权申诉</a></dd>
            <dd><a target="_blank" href="https://account.bilibili.com/answer/addq">分院帽计划</a></dd>
            <dd><a target="_blank" href="//activity.bilibili.com/">活动中心</a></dd>
            <dd><a target="_blank" href="http://link.acg.tv">用户反馈论坛</a></dd>
            <dd><a target="_blank" href="http://h.bilibili.com/wallpaper?action=list">壁纸站</a></dd>
            <dd><a target="_blank" href="http://www.bilibili.com/html/cele.html">名人堂</a></dd>
          </dl>
          <dl>
            <div class="official">
              <a target="_blank" href="//app.bilibili.com/">
                <div class="official-cell phone">
                  <div class="pic"></div>
                  <em>手机端下载</em>
                  <div class="qrcode-box-wrp">

                  </div>
                </div>
              </a>
              <a target="_blank" href="http://weibo.com/bilibiliweb">
                <div class="official-cell weibo">
                  <div class="pic"></div>
                  <em>新浪微博</em>
                  <div class="qrcode-box-wrp">
                    <div class="qrcode-box qrcode-app">
                      
                    </div>
                  </div>
                </div>
              </a>
              <a href="javascript:;">
                <div class="official-cell weixin">
                  <div class="pic"></div>
                  <em>官方微信</em>
                  <div class="qrcode-box-wrp">

                  </div>
                </div>
              </a>
            </div>
          </dl>
        </section>
        <div style="clear:both"></div>
        <section class="partner">
          <div class="banner">
            <div class="partner-banner"></div>
          </div>
          <div class="record">
            <p>广播电视节目制作经营许可证：<span>（沪）字第1248号</span> | 网络文化经营许可证：<span>沪网文[2013]0480-056号</span> | 信息网络传播视听节目许可证：<span>0910417</span> | 互联网ICP备案：<span>沪ICP备13002172号-3</span> 沪ICP证：<span>沪B2-20100043</span> | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3</p>
            <p>网上有害信息举报专区：
              <a href="http://www.12377.cn/?spm=a2hww.20023042.0.0" target="_blank">
                <img src="../../../static/images/huliancenter.png" width="16" height="16" style="vertical-align: sub;"/>
                 中国互联网违法和不良信息举报中心
              </a>
              <a href="http://www.shjbzx.cn" target="_blank">
                <i class="icons-footer icons-footer-report"></i>
                <span>上海互联网举报中心</span>
              </a>
              |
              <a href="http://jb.ccm.gov.cn/" target="_blank">12318 全国文化市场举报网站</a>
            </p>
            <p>
              <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502001911">
                <img src="../../../static/images/beiantubiao.png" style="margin-right:5px;vertical-align: middle;"/>
                沪公网安备 31011502001911号
              </a>
            </p>
          </div>
        </section>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'bfooter',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>
<style lang="stylus" scoped>
.bili-footer
  width 100%
  padding-top 20px
  color #99a2aa
  text-align center
  font-family "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif
  font-size 12px
  a
    color #222
  .footer-wrp
    background-color #f6f9fa
    padding 40px 0
  .footer-cnt
    width 980px
    margin 0 auto
  .boston-postcards
    float left
    margin 0 auto
    margin-bottom 30px
    overflow hidden
    dl
      float left
      text-align left
      width 300px
      height 112px
      padding-right 25px
      padding-left 24px
      line-height 1
      border-left 1px solid #e5e9ef
      font-size 14px
      &:first-child
        border-left 0
        padding-left 0
      &:last-child
        width 280px
        padding-right 0
      dt
        margin-bottom 22px
      dd
        float left
        width 100px
        position relative
        margin-bottom 16px
  .official
    float right
    position relative
    width 100%
    display block
    .pic
      position relative
      margin-left 11px
      width 60px
      height 60px
      float left
    em
      position absolute
      bottom 0
      left 0
      width 82px
      line-height 14px
      text-align center
      font-weight normal
      font-style normal
    .official-cell
      position relative
      width 82px
      height 80px
      float left
    .phone
      .pic
        background url(../../../static/images/icons.d895b84.png) no-repeat -1024px -194px
    .weibo
      .pic
        background url(../../../static/images/icons.d895b84.png) no-repeat -1024px -322px
    .weixin
      .pic
        background url(../../../static/images/icons.d895b84.png) no-repeat -1024px -66px

  .partner
    padding 0
    text-align left
    margin 0 auto
    height 80px
    .banner
      float left
      padding-top 0
      line-height 24px
      .partner-banner
        background url(../../../static/images/footer_banner.png) no-repeat
        width 100px
        height 80px
    .record
      float none
      line-height 24px
      margin 0 68px 0 115px
      a
        color #99a2aa
      p
        font-size 12px
        font-weight 500
      .icons-footer-report
        display inline-block
        vertical-align middle
        width 16px
        height 16px
        margin-right 3px
        background url(../../../static/images/icons.d895b84.png) no-repeat -1367px -89px

</style>
